<template>
  <!-- 头部返回上一级 -->
  <u-popup :show="showPopup" closeOnClickOverla @close="closePopup" @open="openPopup" height="100rpx" mode="bottom"
    zIndex="999999">
    <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
      <block v-if="JSON.stringify(episodeInfo) !== '{}'">
        <view class="teleplay-info">
          <view class="name">
            <text>{{ episodeInfo.video_name }}</text>
            <text>更新至{{ episodeInfo.new_menu_mid }}集 </text>
          </view>
          <view class="episode">1-{{ episodeInfo.count }}</view>
          <!-- 剧集 -->
          <view class="episode-list">
            <block v-for="item in episodeList" :key="item.sort">
              <view class="item">
                <image :src="episodeInfo.cover_url" @click="changeEpisode(item)"></image>
                <view class="item-count">第{{ item.sort }}集</view>
                <view class="item-icon">
                  <u-icon @click="changeEpisode(item)" name="lock" color="#fff" size="48"
                    v-if="item.is_vip === 1"></u-icon>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- <view class="tabbar">
      <text>点击追剧获取更新通知</text>
      <view @click="setUserCollect">追剧</view>
    </view> -->
      </block>
      <view v-else class="loading">
        <u-loading-icon text="加载中..."></u-loading-icon>
      </view>
    </scroll-view>
    <!-- 充值弹出层 -->
    <PayPopup 
    :currentVideoSort="currentSort"
    :videoInfo="myVideoInfo"
    :IsUseAdPay="IsUseAdPay"
    :showPopup.sync="payPopup" 
    @paySuccess="paySuccess" 
    page="episodeList"></PayPopup>
    <!-- 提示更新弹窗 -->
    <u-modal :show="showModal" title="更新提醒" confirmColor="#f97632" closeOnClickOverlay @close="showModal = false"
      @confirm="showModal = false">
      <view class="slot-content">
        <view class="modal-text">视频更新后,将第一时间提醒您~</view>
      </view>
    </u-modal>
  </u-popup>
</template>

<script>
import { getApiEpisodeList, dyGetEpisodeList } from '@/api/teleplay'
import { showMessage } from '@/utils/message'
import PayPopup from '@/components/PayPopup/index.vue'
import { getApiVideoList } from '@/api/teleplay'
import { isShowPay } from '@/utils/index'
import store from '@/store/index'

export default {
  options: { styleIsolation: 'shared' },
  components: { PayPopup },
  props: {
    showPopup: {
      type: Boolean,
      required: true,
    },
    sortTitle: {
      type: Number,
      required: true,
    },
    videoID: {
      type: Number,
      required: true,
    },
    myVideoInfo: {
      type: Object,
    }
  },
  data() {
    return {
      payPopup: false, //充值弹层
      episodeInfo: {},
      total: 0, //当前总集数
      episodeList: [], //剧集列表
      pn: 1, //页码
      ps: 12, //每页条数
      sort: null,
      id: null,
      isLinkJumpVID: null,
      showModal: false,//提示更新弹窗
      flag: true, //节流阀


      currentSort: 0,
      IsUseAdPay: store.state.global.IsHasChannelType,
      DyAdId: null,

    }
  },
  methods: {
    async openPopup() {
      this.IsUseAdPay = store.state.global.IsHasChannelType;
      await this.getVideoList(this.videoID)
      await this.getEpisodeList(this.videoID)
    },
    // 1.关闭选集弹层
    closePopup() {
      this.$emit('update:showPopup', false)
      this.pn = 1
      this.episodeList = []
    },
    // 2.获取剧集列表
    async getEpisodeList(video_id) {
      let userInfo = uni.getStorageSync('userInfo')
      typeof userInfo === 'object' ? userInfo : userInfo = JSON.parse(userInfo)
      const eid = userInfo.eid
      // 开启Loading加载提示
      uni.showLoading({
        title: '加载中',
        mask: true,
      })
      try {
        if(this.IsUseAdPay === 1){
          const { data: { count, list, ad_id }, } = await dyGetEpisodeList({
            video_id, 
            pn: this.pn,
            ps: 1000, 
            eid
          })
          if(ad_id){
            this.DyAdId = ad_id;
          }

          // 当前总集数
          this.total = count
          // 下拉获取新数据进行合并 
          this.episodeList.push(...Array.isArray(list) && list.length > 0 ? list : [])
          // 关闭Loading加载提示
          uni.hideLoading()
        } else {
          const { data: { count, list }, } = await getApiEpisodeList(
            video_id,
            this.pn,
            this.ps,
            eid
          )
          // 当前总集数
          this.total = count
          // 下拉获取新数据进行合并 
          this.episodeList.push(...Array.isArray(list) && list.length > 0 ? list : [])
          // 关闭Loading加载提示
          uni.hideLoading()
        }
        
      } catch (error) {
        uni.hideLoading()
        this.episodeList = []
      }

    },
    // 3.获取短剧数据列表
    async getVideoList(video_id) {
      const { data } = await getApiVideoList(1, 1, video_id)
      this.episodeInfo = Object.assign({}, data.list[0])
    },
    // 4.选集操作=使用节流
    changeEpisode({ sort, id, is_vip }) {
      if (this.flag) {

        if (is_vip === 1) {

          if(this.DyAdId){ // 使用激励广告

          } else {
            const isShow = isShowPay()
            if (!isShow) {
              this.currentSort = sort
              this.showModal = true
              return
            }
          }
        }

        const showPayText = null
        // 向父组件派发时间,重新获取短剧信息
        this.$emit('updateEpisodeInfo', sort, showPayText)
        // 关闭弹窗
        this.closePopup()
        this.flag = false
        setTimeout(() => {
          this.flag = true
        }, 1000)
      }

    },

    // 6.滚到到底部加载更多剧集
    scrolltolower() {
      if (this.episodeList.length >= this.total) {
        showMessage('没有更多了~')
        return
      }
      this.pn++
      this.getEpisodeList(this.videoID)
    },
    // 7.充值成功
    paySuccess() {
      // // 向父组件派发时间,重新获取短剧信息
      this.$emit('updateEpisodeInfo', this.sort,)
      // // 关闭弹窗
      this.$emit('update:showPopup', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.scroll-Y {
  position: relative;
  height: 1000rpx;

  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


  }
}

.teleplay-cover {
  width: 100%;
  height: 80rpx;

}

.teleplay-info {
  width: 750rpx;
  height: 897rpx;
  padding: 44rpx 30rpx;
  position: relative;
  top: -10rpx;
  font-size: 32rpx;
  font-weight: 700;
  border-radius: 24rpx 24rpx 0rpx 0rpx;

  .name {
    color: #212121;

    text:last-child {
      margin-left: 12rpx;
      font-size: 28rpx;
      font-weight: 400;

      color: #999999;
    }
  }

  .episode {
    margin: 20rpx 0;
    color: #ff6718;
  }
}

.episode-list {
  width: 690rpx;
  min-height: 666rpx;
  // padding-bottom: 100rpx;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;

  .item {
    position: relative;
    width: 30%;
    height: 296rpx;
    margin: 0 30rpx 20rpx 0;

    &:nth-child(3n) {
      margin: 0;
    }

    image {
      width: 222rpx;
      height: 296rpx;
      border-radius: 16rpx;
    }

    &-count {
      position: relative;
      top: -52rpx;
      width: 222rpx;
      height: 42rpx;
      color: #fff;
      background: #000000;
      opacity: 0.5;
      text-align: center;
      font-size: 24rpx;
      border-radius: 16rpx;
    }

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .mr-10 {
    margin-right: 20rpx;
  }
}

::v-deep {

  .u-navbar__content {
    height: 78rpx;
    background-color: rgba(255, 255, 255, 0) !important;
    position: absolute;
    top: 40rpx;
  }
}



.modal-text {
  text-align: center;
}
</style>
